<!-- 新拼团(ywm) 我的拼团页面 -->
<template>
  <div id="mygroups">
    <c-title :hide="false" text="我的拼团" totext="开团卡明细" tolink="ywmGroupsDetailed"></c-title>
    <div class="content">
      <van-tabs v-model="activeName" @change="getData" sticky>
        <van-tab :title="items.name" v-for="(items, ind) in titleArr" :key="ind">
          <van-pull-refresh v-model="isLoading" @refresh="loadTop" success-text="刷新成功">
            <div class="list-cell" v-show="activeName == 3">可用开团卡数量：<em>{{cardTotal}}</em>张</div>
            <div class="list_box" v-if="dataList[ind] && !fun.isTextEmpty(dataList[ind].list)">
              <!-- 拼团列表 -->
              <div class="list" v-for="(item, index) in dataList[ind].list" :key="index">
                <template v-if="ind != 3">
                  <div class="store-box" v-if="item.has_one_store && item.has_one_store.id" @click.stop="gotoUrl('o2oStore_v2', { store_id: item.has_one_store.id, fromHome: 1 })">
                    <img :src="item.has_one_store.thumb" alt="" />
                    <div class="store-name">{{ item.has_one_store.store_name }}</div>
                    <i class="iconfont icon-advertise-next"></i>
                  </div>
                  <div class="time_state">
                    <span class="time">开团：{{ item.has_one_team.start_time | startTimes }}</span>
                    <span class="state">{{ item.group_status_text }}</span>
                  </div>
                  <div class="goods_box">
                    <div class="goods_img">
                      <img :src="!fun.isTextEmpty(item.has_one_goods) ? item.has_one_goods.thumb : ''" />
                    </div>
                    <ul class="goods_name">
                      <li class="name_price">
                        <h2 class="name" style="-webkit-box-orient: vertical;">
                          {{ item.has_one_goods ? item.has_one_goods.title : "" }}
                        </h2>
                      </li>
                      <li class="option">
                        <span>{{ $i18n.t("money") }}{{ item.total_price }}</span>
                        <span style="color: #000;">
                          <van-count-down :time="fun.getTimeDifference(item.has_one_team.end_time)" class="bottom_time" format="DD天HH时mm分ss秒" @finish="groupEnd"></van-count-down>
                        </span>
                      </li>
                    </ul>
                  </div>
                  <div class="allbt">
                    <button type="button" v-for="btn in item.group_button_arr" :key="btn.value" @click="clickBtn({ value: btn.value,id:item.id, tid: item.team_id, good: item.has_one_goods,orderid: item.order_id  })">
                      {{ btn.name }}
                    </button>
                  </div>
                </template>
                <template v-if="ind == 3">
                  <!-- 开团卡列表 -->
                  <div class="card-list">
                    <div class="time_state">
                      <span class="time">创建：{{ item.created_at }}</span>
                    </div>
                    <div class="card-title">
                      <div class="card-type">{{ item.use_activity_type_text }}</div>
                      {{ item.open_group_card_name }}
                    </div>
                    <div class="card-time">
                      <div style="display: flex; align-items: center;">
                        仅剩<van-count-down :time="fun.getTimeDifference(item.effective_end_time)" class="bottom_time" format="DD天HH时mm分ss秒" @finish="groupEnd"></van-count-down>
                      </div>
                      <van-button type="danger" size="mini" @click="clickBtn({ value: 5, id: item.id })">去使用</van-button>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <yz-blank :datas="dataList[ind] && dataList[ind].list"></yz-blank>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>

    <van-popup v-model="showActivePop" round :style="{ height: '75%'}">
      <div style="height: 100%; display: flex; flex-direction: column;">
        <van-nav-bar title="拼团列表" right-text="关闭" @click-right="cloneActivePop" />
        <div class="active-pop-box">
          <div v-for="(item, index) in groupList" :key="index">
            <group-list-cell
              :thumb="item.has_one_goods && item.has_one_goods.thumb"
              :title="item.title"
              :group_price="item.has_many_option_levels && item.has_many_option_levels[0] && item.has_many_option_levels[0].group_price"
              :price="item.has_many_option_levels && item.has_many_option_levels[0] && item.has_many_option_levels[0].has_one_fight_groups_option.option_price"
              :num="item.has_many_option_levels[0] && item.has_many_option_levels[0].member_num"
              :id="item.id"
              :storeid="item.store_id"
              @click="openTeam"
            ></group-list-cell>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import mygroups_controller from "./mygroups_controller";

export default mygroups_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#mygroups {
  .content {
    .list_box {
      min-height: 100vh;

      .list {
        background: #fff;
        margin: 0.625rem;
        border-radius: 0.625rem;
        overflow: hidden;

        .store-box {
          display: flex;
          align-items: center;
          padding: 0.5rem 0.875rem 0;
          text-align: left;
          color: #333;

          img {
            width: 1.875rem;
            height: 1.875rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 0.5rem;
          }

          .store-name {
            flex: 1;
            font-size: 0.75rem;
          }
        }

        .time_state {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          height: 2.5rem;
          line-height: 2.5rem;
          padding: 0 0.875rem;

          .state {
            color: #f15353;
          }
        }

        .goods_box {
          // background: #fafafa;
          border-top: solid 0.0625rem #ebebeb;
          padding: 0.625rem 0.875rem;
          display: flex;

          .goods_img {
            width: 5.625rem;
            height: 5.625rem;
            overflow: hidden;
            background: #f2f2f2;
            border-radius: 0.25rem;
            margin-right: 0.625rem;

            img {
              width: 100%;
            }
          }

          .goods_name {
            width: 15.4375rem;
            position: relative;

            .name_price {
              display: flex;
              justify-content: space-between;

              .name {
                width: 100%;
                font-size: 14px;
                line-height: 1.25rem;
                max-height: 2.5rem;
                text-align: left;
                font-weight: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              .price {
                font-size: 14px;
                text-align: right;
                line-height: 1.25rem;

                span {
                  color: #8c8c8c;
                }
              }
            }

            .option {
              width: 100%;
              display: flex;
              justify-content: space-between;
              color: #f15353;
              font-size: 14px;
              margin-top: 0.625rem;
              text-align: left;
              position: absolute;
              bottom: 0.625rem;
            }
          }
        }

        .allbt {
          border-top: solid 0.0625rem #ebebeb;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 0.5rem 0.3rem 0 0;
          flex-wrap: wrap;

          button {
            border-radius: 0.1875rem;
            border: solid 0.0625rem #666;
            font-size: 12px;
            padding: 0.25rem 0.625rem;
            margin-left: 0.625rem;
            margin-bottom: 0.5rem;
            flex-shrink: 0;
          }
        }
      }

      .card-list {
        text-align: left;

        .card-title {
          padding: 0 0.875rem;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-align: left;
          line-height: 1.25rem;

          .card-type {
            font-size: 10px;
            display: inline-grid;
            text-align: center;
            line-height: 1.25rem;
            background-color: #ee2e2b;
            border-radius: 0.125rem;
            margin: 0;
            padding: 0 4px;
            color: #fff;
            margin-right: 0.5rem;
          }
        }

        .card-time {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 10px;
          padding: 0.5rem 0.875rem;

          .van-count-down {
            font-size: 10px;
          }
        }
      }
    }
  }

  .list-cell {
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    text-align: left;

    em {
      color: #ee2e2b;
    }
  }

  .active-pop-box {
    width: 18.875rem;
    flex: 1;
    overflow: scroll;

    ::v-deep #groupListCell {
      padding: 0;

      .goods_img {
        width: 6.25rem;
        height: 6.25rem;
      }
    }
  }
}
</style>
